<template>
  <div class="bg">
    <div class="zindex">
      <div id="mapLine"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
import pao from "../../../../assets/img/pao.png";
export default {
  data() {
    return {
      List: [],
      regionsList: [],
      mTime: null,
      index: 0,
      recommendItems: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    getList() {
      let arr = JSON.parse(mapJson).features;
      arr.forEach((item, i) => {
        // console.log(item.properties);
        var obj = {
          name: item.properties.name,
          itemStyle: {
            areaColor: "#00D3FD"
          },
          status: false,
          end: item.properties.centroid,
          start: []
        };
        switch (i) {
          case 0:
            obj.start = [98, 35];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 1:
            obj.start = [105, 40.8];
            obj.width = 90;
            obj.lineHeight = 20;
            break;
          case 2:
            obj.start = [94, 37];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 3:
            obj.start = [109, 33];
            obj.width = 80;
            obj.lineHeight = 0;
            break;

          case 4:
            obj.start = [98, 34];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 5:
            obj.start = [107, 40.8];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 6:
            obj.start = [94, 37];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 7:
            obj.start = [109, 33.5];
            obj.width = 80;
            obj.lineHeight = 0;
            break;

          case 8:
            obj.start = [95, 37.5];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 9:
            obj.start = [107, 39];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 10:
            obj.start = [98, 33];
            obj.width = 80;
            obj.lineHeight = 20;
            break;
          case 11:
            obj.start = [108.5, 33.5];
            obj.width = 80;
            obj.lineHeight = 0;
            break;

          case 12:
            obj.start = [99, 32];
            obj.width = 110;
            obj.lineHeight = 30;
            break;
          case 13:
            obj.start = [107.5, 32.5];
            obj.width = 110;
            obj.lineHeight = 20;
            break;

          default:
            break;
        }
        this.List.push(obj);
      });
      this.mapActive();
      this.getMap();
    },
    getMap() {
      var dom = document.getElementById("mapLine");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = mapJson;
      myChart.showLoading();
      myChart.hideLoading();
      echarts.registerMap("gansu", geoJson);
      let that = this;
      myChart.setOption(
        (option = {
          //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          geo: {
            z: 5,
            show: true,
            map: "gansu",
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "80%", //地图大小
            // zoom: 0.65, //地图缩放比例
            roam: false,
            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff"
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "#00D3FD",
                borderColor: "#0F5A69",
                borderWidth: 1
              }
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: true,
                color: "#222",
                fontSize: "12"
              },
              itemStyle: {
                borderColor: "#0F5A69",
                borderWidth: 2,
                areaColor: "#00FFB5"
              }
            },
            select: {
              disabled: true //不能点击地图
            },
            // 对不同的区块进行着色
            regions: that.recommendItems
          },
          // visualMap: {
          //   min: 0,
          //   max: 10000,
          //   type: "piecewise",
          //   left: "center",
          //   bottom: 10,
          //   showLabel: !0,
          //   orient: "horizontal",
          //   itemWidth: 10, //图形的宽度，即长条的宽度。
          //   itemHeight: 10,
          //   textGap: 5,
          //   itemGap: 20,
          //   textStyle: {
          //     color: "#A7D4C6",
          //     fontSize: 12
          //   },

          //   pieces: [
          //     {
          //       gte: 5,
          //       lte: 5,
          //       label: "低风险",
          //       color: "#00FFFB"
          //     },
          //     {
          //       gte: 4,
          //       lte: 4,
          //       label: "中风险",
          //       color: "#00FF67"
          //     },
          //     {
          //       gte: 3,
          //       lte: 3,
          //       label: "中高风险",
          //       color: "#FFF90A"
          //     },
          //     {
          //       gte: 2,
          //       lte: 2,
          //       label: "高风险",
          //       color: "#F57F01"
          //     },
          //     {
          //       gte: 1,
          //       lte: 1,
          //       label: "特大风险",
          //       color: "#F46A57"
          //     }
          //   ]
          // },

          series: [
            // 地图的样式---主要是为了添加阴影
            {
              type: "map",
              map: "gansu",
              layoutCenter: ["50%", "50%"],
              layoutSize: "80%",
              roam: false,
              itemStyle: {
                normal: {
                  shadowColor: "rgba(5,79,94,0.9)",
                  shadowBlur: 2,
                  shadowOffsetX: -5,
                  shadowOffsetY: 10
                }
              }
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              effect: {
                show: that.recommendItems[0].status,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 5, //图标大小
                color: "#37F6E0" // 图标颜色
              },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: that.recommendItems[0].status,
                  width: that.recommendItems[0].status ? 2 : 0, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0" // 飞线颜色
                },
                color: "#37F6E0"
              },
              label: {
                show: that.recommendItems[0].status,
                position: "start",
                formatter: function(params) {
                  //文本提示框
                  return (
                    "\n\n{title|" +
                    that.recommendItems[0].name +
                    "}\n{value|" +
                    "1203万" +
                    "}"
                  );
                },
                width: that.recommendItems[0].width,
                height: that.recommendItems[0].width,
                backgroundColor: {
                  image: pao
                },
                rich: {
                  //标题样式
                  title: {
                    height: that.recommendItems[0].width / 2,
                    width: that.recommendItems[0].width,
                    align: "center",
                    lineHeight: that.recommendItems[0].width / 4,
                    fontSize: 14,
                    color: "#A7D4C6"
                  },
                  value: {
                    //内容样式
                    height: that.recommendItems[0].width / 2,
                    width: that.recommendItems[0].width,
                    lineHeight: that.recommendItems[0].width / 4,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#00FFB5",
                    align: "center"
                  }
                }
              },
              data: [
                {
                  coords: [
                    that.recommendItems[0].start, // 起点
                    that.recommendItems[0].end // 终点
                  ]
                }
              ]
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              effect: {
                show: that.recommendItems[1].status,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 5, //图标大小
                color: "#37F6E0" // 图标颜色
              },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: that.recommendItems[1].status,
                  width: that.recommendItems[1].status ? 2 : 0, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0" // 飞线颜色
                },
                color: "#37F6E0"
              },
              label: {
                show: that.recommendItems[1].status,
                position: "start",
                formatter: function(params) {
                  //文本提示框
                  return (
                    "\n{title|" +
                    that.recommendItems[1].name +
                    "} \n{value|" +
                    "1203万" +
                    "}"
                  );
                },
                width: that.recommendItems[1].width,
                height: that.recommendItems[1].width,
                backgroundColor: {
                  image: pao
                },
                rich: {
                  //标题样式
                  title: {
                    height: that.recommendItems[1].width / 2,
                    width: that.recommendItems[1].width,
                    align: "center",
                    lineHeight: that.recommendItems[1].width / 2,
                    fontSize: 14,
                    color: "#A7D4C6"
                  },
                  value: {
                    //内容样式
                    height: that.recommendItems[1].width / 2,
                    width: that.recommendItems[1].width,
                    lineHeight: 0,
                    fontSize: 14,
                    fontWeight: "bold",
                    align: "center",
                    color: "#00FFB5"
                  }
                }
              },
              data: [
                {
                  coords: [
                    that.recommendItems[1].start, // 起点
                    that.recommendItems[1].end // 终点
                  ]
                }
              ]
            },
            // // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              effect: {
                show: that.recommendItems[2].status,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 5, //图标大小
                color: "#37F6E0" // 图标颜色
              },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: that.recommendItems[2].status,
                  width: that.recommendItems[2].status ? 2 : 0, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0" // 飞线颜色
                },
                color: "#37F6E0"
              },
              label: {
                show: that.recommendItems[2].status,
                position: "start",
                formatter: function(params) {
                  //文本提示框
                  return (
                    "\n\n{title|" +
                    that.recommendItems[2].name +
                    "}\n{value|" +
                    "1203万" +
                    "}"
                  );
                },
                width: that.recommendItems[2].width,
                height: that.recommendItems[2].width,
                backgroundColor: {
                  image: pao
                },
                rich: {
                  //标题样式
                  title: {
                    height: that.recommendItems[2].width / 2,
                    width: that.recommendItems[2].width,
                    align: "center",
                    lineHeight: that.recommendItems[2].lineHeight,
                    fontSize: 14,
                    color: "#A7D4C6"
                  },
                  value: {
                    //内容样式
                    height: that.recommendItems[2].width / 2,
                    width: that.recommendItems[2].width,
                    lineHeight: that.recommendItems[2].lineHeight,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#00FFB5",
                    align: "center"
                  }
                }
              },
              data: [
                {
                  coords: [
                    that.recommendItems[2].start, // 起点
                    that.recommendItems[2].end // 终点  酒泉
                  ]
                }
              ]
            },
            // // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              effect: {
                show: that.recommendItems[3].status,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 5, //图标大小
                color: "#37F6E0" // 图标颜色
              },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: that.recommendItems[3].status,
                  width: that.recommendItems[3].status ? 2 : 0, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0" // 飞线颜色
                },
                color: "#37F6E0"
              },
              label: {
                show: that.recommendItems[3].status,
                position: "start",
                formatter: function(params) {
                  //文本提示框
                  return (
                    "\n{title|" +
                    that.recommendItems[3].name +
                    "}\n{value|" +
                    "1203万" +
                    "}"
                  );
                },
                width: that.recommendItems[3].width,
                height: that.recommendItems[3].width,
                backgroundColor: {
                  image: pao
                },
                rich: {
                  //标题样式
                  title: {
                    height: that.recommendItems[3].width / 2,
                    width: that.recommendItems[3].width,
                    align: "center",
                    lineHeight: 40 + that.recommendItems[3].lineHeight,
                    fontSize: 14,
                    color: "#A7D4C6"
                  },
                  value: {
                    //内容样式
                    height: that.recommendItems[3].width / 2,
                    width: that.recommendItems[3].width,
                    lineHeight: 0,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#00FFB5",
                    align: "center"
                  }
                }
              },
              data: [
                {
                  coords: [
                    that.recommendItems[3].start, // 起点
                    that.recommendItems[3].end // 终点
                  ]
                }
              ]
            }
          ]
        })
      );

      myChart.on("mouseover", () => {
        // 停止定时器，清除之前的高亮
        clearInterval(that.mTime);
        that.mTime = null;
        that.index = 0;
      });
      myChart.on("mouseout", () => {
        // console.log("mouseout");
        that.mapActive();
      });
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
    mapActive() {
      clearInterval(this.mTime);
      this.mTime = null;
      var result = [];
      var chunk = 4;

      for (var i = 0, j = this.List.length; i < j; i += chunk) {
        result.push(this.List.slice(i, i + chunk));
      }
      result[0].forEach((item, i) => {
        item.itemStyle = {
          areaColor: "#00FF67"
        };
        item.status = true;
      });
      this.recommendItems = result[0];
      // console.log(result[0]);
      // 用定时器控制高亮
      var num = -1;
      this.mTime = setInterval(() => {
        if (num >= 3) {
          num = 0;
        } else {
          num++;
        }
        // console.log(num);
        this.recommendItems = result[num];
        if (this.recommendItems.length < chunk) {
          let data = this.List.slice(0, chunk - this.recommendItems.length);
          this.recommendItems = data.concat(this.recommendItems);
        }
        this.recommendItems.forEach((item, i) => {
          item.itemStyle = {
            areaColor: "#00FF67"
          };
          item.status = true;
        });
        // console.log(this.recommendItems);
        this.getMap();
      }, 5000);
    }
  },
  beforeDestroy() {
    clearInterval(this.mTime);
    this.mTime = null;
  }
};
</script>

<style scoped>
#mapLine {
  width: 900px;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -450px;
  /* transform-origin: center bottom;
  transform: rotateX(55deg) translateZ(80px) ; */
}
.bg {
  width: 100%;
  height: 88vh;
  background: url("../../../../assets/img/bj.png") no-repeat center;
  background-size: 100% 100%;
}
.zindex {
  width: 500px;
  height: 500px;
  background: url("../../../../assets/img/bg.png") no-repeat center;
  background-size: 80% 80%;
  margin: 0 auto;
  position: relative;
  /* transform-style: preserve-3d;
  perspective: 800px; */
}
</style>
